<template>
    <NavBar> <template v-slot:default>{{title}}</template></NavBar>
    <div class="address-info">
        <van-address-edit
                :area-list="areaList"
                show-postal
                show-set-default
                show-search-result
                :show-delete="type=='edit'"
                :search-result="searchResult"
                :area-columns-placeholder="['请选择省份', '请选择城市', '请选择区域']"
                @save="onSave"
                @delete="onDetele"
                @change-detail=""
        />
    </div>
</template>

<script>
    import {useRouter,useRoute} from 'vue-router'
    import {Toast} from 'vant'
    import {ADDaddress,EditAddress,DeleteAddress,getAddressDetail} from '../../../network/address'
    import {onMounted,reactive,computed,toRefs} from  'vue'
    import { areaList } from '@vant/area-data';
    import NavBar from '../../../components/common/navbar/NavBar'
    export default {
        name: "editAddress",
        components: {NavBar},
        data() {
            return {
                areaList,
                searchResult: [],
            };
        },
        setup(){
            const router = useRouter();
            const route = useRoute();
            //创建数据模型
            const state =reactive({
                params:{},
                type:'add',
                addressId:'',
                title:'',
                addresInfo:{}
            })
            const {type,addressId}=route.query;
            state.type=type;
            state.addressId=addressId
            const onSave= (content)=>{
                //创建这个对象，里面的值等于表格填写值，七个值
                const params ={
                    name:content.name,
                    phone:content.tel,
                    province:content.province,
                    city:content.city,
                    address:content.addressDetail,
                    county:content.county,
                    is_default:content.isDefault ? 1:0
                }
                if(state.type=='edit'){
                    EditAddress(state.addressId,params)
                        Toast.success('修改成功');
                        setTimeout(()=>{router.back();},1000)
                }else if(state.type=='add'){
                    ADDaddress(params);
                    Toast.success('保存成功');
                    setTimeout(()=>{router.back();},1000)
                }
                }
                //从路由获取类型和id

            // 创建title，判断点进来的类型显示标题
            const title = computed(()=>{
                return state.type=='add'?'新增地址':'编辑地址'
            })
            onMounted(()=>{
                // if (type=='edit'){
                //     getAddressDetail(addressId).then(res=>{
                //         const addressDetail =res;
                //         const _areaCode = '00414';
                //         state.addresInfo={
                //             name:addressDetail.name,
                //             tel:addressDetail.tel,
                //             province:addressDetail.province,
                //             city:addressDetail.city,
                //             county:addressDetail.county,
                //             areaCode:_areaCode,
                //             isDefault:!!addressDetail.is_default
                //
                //         }
                //     })
                // }
            })
            const onDetele=()=>{
                DeleteAddress(state. addressId).then(res=>{
                    Toast('删除成功');
                    setTimeout(()=>{
                        router.back();
                    },1000)
                })
            }
            return{
                ...toRefs(state),
                title,
                onSave,
                onDetele
            }
        }

    }
</script>

<style scoped>
.address-info{
    margin-top: 50px;
}
</style>